import React, { useEffect, useState } from 'react';
import './Newslist.scss'
import { DownOutlined, SearchOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button, Modal, Cascader, Space, Input, Tag, Table, Drawer, Checkbox, Form } from 'antd';
import * as service from '../../../../api/index'
import * as zzservice from '../../../../api/indexzz';
import { useNavigate } from "react-router-dom"
import { async } from 'q';


interface Props {

}
function Newslist(props: Props) {
  const [car, setCar] = useState([])
  const [carxx, setCarxx] = useState([])
  const [carxq, setCarxq] = useState<any>({})
  const [inpu, setInpu] = useState('')
  const [inpuid, setInpuid] = useState('')
  const [xiuinpu, setXiuinpu] = useState<any>({})
  var [form] = Form.useForm()
  let navigate = useNavigate()
  interface Option {
    value: string | number;
    label: string;
    children?: Option[];
  }

  const options: Option[] = [
    {
      value: 0,
      label: '请选择',

    },
    {
      value: 1,
      label: '待发布',
    },
    {
        value: 2,
        label: '已发布',
      }
  ];


  const [isModalOpen, setIsModalOpen] = useState(false);

  const onFinish =async (values: any) => {
    console.log('Success:', values);
    // if(values.id){
    //   var res2 = await service.new_xiunewsfei({...values,title:values.value})
    // }else{
    //   var res1 = await service.new_addnewsfei({...values,title:values.value})
    // }
    // var res = await service.new_newsfei()
    // setCar(res.data)
    // setIsModalOpen(false);
   
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
    setIsModalOpen(false);
  };


  const showModal = () => {
    setIsModalOpen(true);
    form.resetFields()
  };


  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onChange = async (value: any) => {
    value = value.join()
    // var res = await service.new_newslist()
    var res = await zzservice.new_messages()
    var t = res.data.data.filter((item: any, index: any) => {
      return item.status == value
    })
    setCarxx(t)
  };


  var fa = async () => {
    // 新闻分类
    // var res = await service.new_newsfei()
    var res = await zzservice.user_fmessages()

    // 新闻列表
    // var res1 = await service.new_newslist()
    var res1 = await zzservice.new_messages()
    console.log(res1.data);
    
    setCar(res.data.data)
    setCarxx(res1.data.data)

  }
  useEffect(() => {
    fa()
  }, [])

  var cha = async (e: any) => {
    // var res = await service.new_search({ title_like: e.target.value })
    // setCarxx(res.data)
  }



  const columns: any = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      width: 40
    },
    {
      title: '列表图',
      key: 'pic',
      render: (_: any, record: any) => (<img src={record.pic} alt="" style={{ width: 60, height: 40 }} />),
      align: 'center',
      width: 80
    },
    {
      title: '新闻标题',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
      width: 120
    },
    {
      title: '可见范围',
      dataIndex: 'ranges',
      key: 'ranges',
      align: 'center',
      width: 120
    },
    {
      title: '发布状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      width: 80,
      render: (_: any, record: any) => (record.status == 1 ? <Tag color="success">待发布</Tag> : <Tag color="error">已发布</Tag>),
    },
    {
      title: '发布时间',
      dataIndex: 'time',
      key: 'time',
      align: 'center',
      width: 120
    },
    {
      title: '浏览量',
      dataIndex: 'views',
      key: 'Views',
      align: 'center',
      width: 70
    },
    {
      title: '收藏量',
      dataIndex: 'collection',
      key: 'collection',
      align: 'center',
      width: 70
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 140,
      render: (_: any, record: any) => (
        <Space size="middle">
          <a onClick={() => { navigate({ pathname: '/index/newsmanage/addnew', search: `id=${record.id}` }) }}>编辑</a>
          <a onClick={() => { dele(record.id) }}>删除</a>
        </Space>
      ),
    },
  ];


  const [open, setOpen] = useState(false);

  const showDrawer = (record: any) => {
    setCarxq(record)
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  // 新闻单删除
  var dele = async (id: any) => {
    // var res = await service.new_delete({ id })
    var res = await zzservice.new_delMessages({ id })
    // var res1 = await service.new_newslist()
    var res1 = await zzservice.new_messages()
    setCarxx(res1.data.data)
  }
  // 车辆分类输入内容
  var addlei = (e: any) => {
    setInpu(e.target.value)
  }
  // 新闻分类删除
  var fenleidel = async (id: any) => {
    // var res1 = await service.new_deletenewsfei({ id })
    // var res = await service.new_newsfei()
    // setCar(res.data)
  }
  // 新闻分类编辑
  var fenleiedit = async (id: any) => {
    // setIsModalOpen(true);
    // var res1 = await service.new_editnewsfei({ id })
    // form.setFieldsValue(res1.data)

  }
  // 新闻分类查询
  var fenchaxun= async(value:any)=>{
//  var res=await service.new_searchnewslist({sort:value})
//  setCarxx(res.data)
  }
  return (
    <div className='newslist'>
      <div className="hai">
        <div className="h"></div>
        <div className="h1">新闻管理</div>
      </div>
      <div className="h2">
        <div className="a1">
          <span style={{ color: '#858383' }}>发布状态</span>
          <Cascader options={options} onChange={onChange} placeholder="请选择" className='xuan' />
          <Input placeholder="请输入关键字" suffix={<SearchOutlined />} style={{ width: 300 }} onPressEnter={(e) => { cha(e) }} />
        </div>
        <div className="a2">
          <Button type="primary" icon={<PlusOutlined />} onClick={() => { navigate('/index/newsmanage/addnew') }}>新增新闻</Button>
          <Button type="primary" ghost style={{ marginLeft: 10 }} onClick={()=>{ fa()}}>刷新</Button>
        </div>

      </div>
      <div className="h3">
        <div className="zuo">
          <div className="han">
            <span>新闻分类</span>
            <PlusCircleOutlined style={{ color: 'blue' }} onClick={showModal} />
          </div>
          {
            car.map((item: any, index) => {
              return (
                <div className="item" key={index} >

                  <span style={{ cursor: 'pointer' }} onClick={()=>{fenchaxun(item.value)}}>{item.value}</span>
                  <div>
                    <Tag color="magenta" style={{ cursor: 'pointer' }} onClick={() => { fenleiedit(item.id) }}>编辑</Tag>
                    <Tag color="volcano" style={{ cursor: 'pointer' }} onClick={() => { fenleidel(item.id) }}>删除</Tag>
                  </div>

                </div>
              )
            })
          }
          {
            isModalOpen ? (
              <div className='tan'>
                <Form
                form={form}
                  name="basic"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  style={{ maxWidth: 400 }}
                  initialValues={{ remember: true }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item
                    label="分类名称："
                    name="value"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="id"
                    name="id"
                    hidden
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button onClick={handleCancel} style={{marginRight:10}}>
                      取消
                    </Button>
                    <Button type="primary" htmlType="submit">
                      确认
                    </Button>
                  </Form.Item>
                </Form>
              </div>

            ) : ''
          }

        </div>
        <div className="you">
          <Table columns={columns} dataSource={carxx} />
        </div>
      </div>
    </div>
  );
}

export default Newslist;